<template>
<cover-view class="shield" v-if="show">
	<cover-view class="getPointBox" :style="'top:' + (windowHeight * 0.18) + 'px;line-height:' + coinSize + 'px;'">
		<cover-image v-if="score >= 90" :src="'/images/test/xingji5.gif'|remoteImgSourcePrefix" class="xingji"></cover-image>
		<cover-image v-else-if="score >= 80" :src="'/images/test/xingji4.gif'|remoteImgSourcePrefix" class="xingji"></cover-image>
		<cover-image v-else-if="score >= 60" :src="'/images/test/xingji3.gif'|remoteImgSourcePrefix" class="xingji"></cover-image>
		<cover-image v-else-if="score >= 40" :src="'/images/test/xingji2.gif'|remoteImgSourcePrefix" class="xingji"></cover-image>
		<cover-image v-else :src="'/images/test/xingji1.gif'|remoteImgSourcePrefix" class="xingji"></cover-image>
		
		<cover-view class="gradeBoard">
			<cover-view class="yourScore">{{score || 0}}</cover-view>
			<!-- <cover-view v-if="point" class="coinIcon">
				<cover-image src="../static/img/test/coin.png" :style="'vertical-align:-35%;width:' + coinSize + 'px;height:' + coinSize + 'px;'"></cover-image>
				<cover-view style="font-size: 30px;display: inline;">+{{point}}</cover-view>
			</cover-view> -->
			<button class="ensure" @click="ensure">查看详情</button>
		</cover-view>
	</cover-view>
</cover-view>
</template>

<script>
	export default{
		props: ['point', 'show', 'score'],
		// props:{
		// 	point:{
		// 		type: String,
		// 		default: 0
		// 	},
		// 	show:{
		// 		type: Boolean,
		// 		default: false 
		// 	}
		// },
		data(){
			return{
				windowHeight: 667,
				windowWidth: 375,
				coinSize: 62
			}
		},
		mounted(){
			let sysinfo = uni.getSystemInfoSync()
			this.coinSize = Math.floor(sysinfo.windowWidth / 6)
			this.windowHeight = sysinfo.windowHeight

		},
		filters:{
			remoteImgSourcePrefix(url){
				return 'https://zhiyue.insyte.cn' + url
			}
		},
		methods:{
			ensure(){
				this.$emit('ensure')
			}
		},
		onLoad(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.shield{
		position:fixed;
		z-index: 30;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
	}
	.getPointBox{
		padding: 20rpx 0;
		color: #ffbe33;
		position: absolute;
		z-index: 4;
		text-align: center;
		left: 30rpx;
		right: 30rpx;
		cover-image{
			position: relative;
			z-index: 3;
			display: inline-block;
			vertical-align: bottom;
		}
	}
	.gradeBoard{
		position: relative;
		padding-top: 130rpx;
		padding-bottom: 40rpx;
		top: -130rpx;
		width: 100%;
		text-align: center;
		border-radius: 30rpx;
		// background-color: #D2F2FB;
		// background-image: url('../static/img/test/bubble.png');
		// background-repeat: no-repeat;
		// background-size: 50rpx 80rpx;
		// background-position: 590rpx 18rpx;
		.yourScore{
			// width: 310rpx;
			// height: 90rpx;
			width: 196rpx;
			height: 74rpx;
			font-size: 50rpx;
			color: #FFCC33;
			line-height: 74rpx;
			text-align: center;
			border-radius: 45rpx;
			margin: 0 auto;
			background-color: #FFF9F9;
		}
	}
	.coinIcon{
		animation: fadeIn 1s;
	}
	.ensure{
		width: 400rpx;
		height: 100rpx;
		margin: 50rpx auto;
		line-height: 100rpx;
		font-size: 38rpx;
		text-align: center;
		border-radius: 50rpx;
		color: #ffffff;
		background-color: #2ca1ff;
		background-image: url('../static/img/test/reflectLight.png');
		background-repeat: no-repeat;
		background-position: 8rpx 8rpx;
		background-size: 42rpx 48rpx;
		&::after{
			border:none;
		}
	}
	.xingji{
		width: 277rpx;
		height: 287rpx;
		// width: 546rpx;
		// height: 535rpx;
	}
	@keyframes fadeIn{
		0%{
			transform: translateY(20px);
			opacity: 0;
		}
		100%{
			transform: translateY(0);
			opacity: 1;
		}
	}
</style>
